<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content="mock,Mock,在线mock服务,前后端分离,在线mock,在线接口Mock平台"/>
    <meta name="description" content="Bluewind Mock 是一个可视化, 易操作的能快速生成模拟数据的再次按Mock服务."/>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <title>Mock平台-登陆</title>

    <!-- 引入element-ui的css -->
    <link rel="stylesheet" th:href="@{/lib/element-ui/theme-chalk/index.css}">

    <!-- 引入vue和vue-i18n的js -->
    <script th:src="@{/lib/vue/vue.min.js}"></script>
    <script th:src="@{/lib/vue/vue-i18n.js}"></script>
    <!-- 引入axios和qs的js -->
    <script th:src="@{/lib/axios.min.js}"></script>
    <script th:src="@{/lib/qs.min.js}"></script>
    <!-- 引入element-ui的js -->
    <script th:src="@{/lib/element-ui/index.js}"></script>
    <!-- 引入md5的js -->
    <script th:src="@{/lib/md5.js}"></script>
    <!-- 引入公共js -->
    <script th:src="@{/js/public.js}"></script>

    <style>
        body {
            background-image: url("[[@{/}]]images/login-background.jpg");
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #464646;
        }
        .login-container {
            width: 99%;
            height: 98%;
            position: absolute;
        }

        .login-page {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            width: 350px;
            padding: 35px 35px 15px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }

        label.el-checkbox.rememberme {
            margin: 0px 0px 15px;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-container">
        <el-form :model="loginForm" :rules="loginRules"
                 status-icon
                 ref="loginForm"
                 label-position="left"
                 label-width="0px"
                 class="login-page">
            <h3 class="title">Mock平台-登陆</h3>

            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-checkbox v-model="checked" class="rememberme">记住密码
            </el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
            <p>没有帐号？
                <el-link type="primary" @click="register">点此注册</el-link>
            </p>
        </el-form>
    </div>
</div>
</body>

<script type="text/javascript" th:inline="javascript">
    Util.ctx = /*[[@{/}]]*/'';

    // 登录过期的时候，跳出ifram框架
    if (top.location != self.location) {
        top.location = self.location;
    }

    new Vue({
        el: '#app',
        data: function () {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                loginRules: {
                    username: [{required: true, message: '请输入您的账户', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                },
                checked: false,
                logining: false,
            }
        },
        methods: {
            handleSubmit: function () {
                this.$refs.loginForm.validate((valid) => {
                    if(valid) {
                        this.logining = true;
                        let formdata = {
                            username: this.loginForm.username,
                            password: md5.MD5(this.loginForm.password)
                        }
                        $axios({
                            method: 'post',
                            url: Util.ctx + "doLogin",
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                            },
                            data: formdata
                        }).then((res) => {
                            this.logining = false;
                            console.log(res.data);
                            if (res.data.code === 200) {
                                console.log(res.data);
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.rememberMe();
                                setTimeout(()=> {
                                    window.location.href = Util.ctx + "index";
                                }, 500);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        }).catch((res) => {
                            this.logining = false;
                            console.log(res);
                        })
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            },
            rememberMe: function () {
                if (this.checked) {
                    localStorage.setItem("username", this.loginForm.username, "7d");
                    localStorage.setItem("password", this.loginForm.password, "7d");
                } else {
                    localStorage.removeItem("username");
                    localStorage.removeItem("password");
                }
            },
            register() {
                window.location.href = ctx + "register";
            }
        },
        mounted: function () {
            if (localStorage.getItem("username") && localStorage.getItem("password")) {
                this.loginForm.username = localStorage.getItem("username");
                this.loginForm.password = localStorage.getItem("password");
                this.checked = true;
            }
        }
    })
</script>
</html>